<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>表单设计器</title>
    <link href="../../css/tableLayout.css" rel="stylesheet" type="text/css"/>
    <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
    <link href="../../css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../css/formDesign2.css" rel="stylesheet" type="text/css"/>
    <link href="../../res/css/demo.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!--     <script src="../../../../scripts/jquery.min.js" type="text/javascript"></script>
 -->    <script src="../../../../scripts/miniui/miniui.js" type="text/javascript"></script>
    <script src="../../../../scripts/boot.js" type="text/javascript"></script>
    <script src="../../js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../js/xinyuansu.js" type="text/javascript"></script>
    <script src="../../js/action.js" type="text/javascript"></script>
    <script src="../../js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="../../js/fixheight.js" type="text/javascript"></script>
    <script src="../../js/circular-json.js" type="text/javascript"></script>
    
</head>
<body>

<div id="layout1" class="mini-layout" style="width:100%;height:100vh;" onclick="hs('a','b')">
    <!--顶部工具栏-->
    <div  region="north" showCollapseButton="false" showHeader="false" height="36"
          class="mini-toolbar" style="border-bottom: 1px solid #aed0ea;padding: 2px 0 0 0;">
        <table style="width: 100%;">
            <tr>
                <td style="width: 100%">
                    <label style="vertical-align: middle;">表单名称：</label>
                    <input id="cFormName" class="mini-textbox" emptyText="请输入表单名称" required="true" requiredErrorText="表单名称不能为空"/>
                    <label style="margin-left: 8px;vertical-align: middle;">模式：</label>
                    <input id="formTypes" class="mini-combobox" emptyText="请输入表单名称" required="true"
                           valueField="id" textField="text" width="116"
                           value="form"  onvaluechanged="onDesignModeChanged" />
                </td>
                <td style="white-space: nowrap">
                    <!--<a class="mini-menubutton popupMenu" menu="#popupMenu" >操作</a>-->
                    <!--<ul id="popupMenu" class="mini-menu" style="display:none;">-->
                    <!--&lt;!&ndash;<li iconCls="icon-edit" onclick="automaticLayout()">自动布局</li>&ndash;&gt;-->
                    <!--<li iconCls="icon-upload" onclick="Alignment('top')">上对齐</li>-->
                    <!--<li iconCls="icon-download" onclick="Alignment('bottom')">下对齐</li>-->
                    <!--<li iconCls="icon-upgrade" onclick="Alignment('left')">左对齐</li>-->
                    <!--<li iconCls="icon-downgrade" onclick="Alignment('right')">右对齐</li>-->
                    <!--&lt;!&ndash;<li iconCls="icon-add" onclick="reverseGeneration()">反向生成</li>&ndash;&gt;-->
                    <!--</ul>-->
                    <a id="cTree" class="mini-button" iconCls="icon-add"  style="display: none" onclick="onSetTree()">设置档案</a>    
                    <a class="mini-button" iconCls="icon-add" onclick="setButton()">设置按钮</a>
                    <a class="mini-button" iconCls="icon-add" onclick="setMenu()">设置菜单</a>
                    <a class="mini-button" iconCls="icon-save" onclick="save()">保存</a>
                    <!--<a class="mini-button" iconCls="icon-nowait" onclick="refresh()">刷新</a>-->
                </td>
            </tr>
            <!--<tr>-->
                <!--<td style="width: 100%">-->
                 <!--</td>-->
            <!--</tr>-->
        </table>
    </div>
    <!--左侧-->
    <div title="" region="west" headerAlign="center" showCollapseButton="true" showSplitIcon="true" showHeader="false" width="200" maxWidth="350" minWidth="100">
        <div id="form-outlookbar" class="mini-outlookbar form-outlookbar" expandOnLoad="true" style="width:auto;height:100%;" autoCollapse="true">
            <div title="组件" class="component" >
                <table style="width:100%;table-layout:fixed;">
                    <tr>
                        <td class="component-item textbox" draggable="true" onmousedown="onMenuDrag('textbox')">文本框</td>
                    </tr>
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('textarea')">文本域</td>
                    </tr>
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('formname')">文本</td>
                    </tr>
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('spinner')">数值</td>
                    </tr>
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('buttonedit')">参照</td>
                    </tr>
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('datepicker')">时间选择器</td>
                    </tr>
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('combobox')">下拉框</td>
                    </tr>
                    <!--<tr>-->
                        <!--<td class="component-item" draggable="true" onmousedown="onMenuDrag('checkbox')">复选框</td>-->
                    <!--</tr>-->
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('table')">表格</td>
                    </tr>
                    <tr>
                        <td class="component-item" draggable="true" onmousedown="onMenuDrag('tab')">页签</td>
                    </tr>
                </table>
            </div>
            <div title="其他" class="other">

            </div>
        </div>
    </div>
    <!--主面板-->
    <div title="center" id="center" region="center" bodyStyle="overflow:auto;" style="background-image: url(../../img/beijing.png);left:300px;">
<!--          <form id="mainField"  onmousedown="down(event)" onmouseup="up(event)" onmousemove="move(event)" style="height: calc(100% - 5px);width:calc(100% - 0px);min-width:calc(100% - 5px);">
 -->        <form id="mainField" style="height: calc(100% - 5px);width:calc(100% - 0px);min-width:calc(100% - 5px);">
            <!-- <div style="clear:both"></div> -->
            <div id="rect" style="position: absolute;z-index: 1000; background-color: rgb(195, 213, 237); opacity: 0.6; border: 1px dashed rgb(0, 153, 255); display: none;">
            </div>
        </form>
    </div>
    <div title="控件属性" region="east" showHeader="false" showCloseButton="false" width="270px" showSplitIcon="true">
        <!--form表格-->
        <form id="form1">
            <div id="outlookbar2" class="mini-outlookbar " expandOnLoad="true" autoCollapse="false" style="width:auto;">
                <div title="基本属性">
                    <table style="width:100%;table-layout:fixed;">
                        <tr class="cTableField">
                            <td class="tdNum1">绑定字段：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <!--<input id="cTableField" name="cTableField" class="mini-textbox" />-->
                                <input id="cTableField" textName="cTableField" class="mini-buttonedit" emptyText="请选择..."
                                       onbuttonclick="onBindKey" allowInput="false" />
                            </td>
                        </tr>
                        <tr class="cLadText">
                            <td class="tdNum1">标题：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cLadText" name="cLadText" class="mini-textbox" />
                            </td>
                        </tr>
                        <tr class="cTabText" style="display: none">
                            <td class="tdNum1">页签名：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cTabText" name="cTabText" class="mini-textbox" />
                            </td>
                        </tr>
                        <tr class="cFormTitle" style="display: none">
                            <td class="tdNum1">内容：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cFormTitle" name="cFormTitle" class="mini-textbox" />
                            </td>
                        </tr>
                        <tr class="cFontSize" style="display: none">
                            <td class="tdNum1">字号：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cFontSize" name="cFontSize" class="mini-combobox" />
                            </td>
                        </tr>
                        <tr class="cLength">
                            <td class="tdNum1">长度：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cLength" name="cLength" class="mini-textbox" />
                            </td>
                        </tr>
                        <tr class="cFormat" style="display: none">
                            <td class="tdNum1">格式：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cFormat" name="cFormat" class="mini-combobox"/>
                            </td>
                        </tr>
                        <tr class="cFormat" style="display: none">
                            <td class="tdNum1">设置默认值：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cDateDefault" name="cDateDefault" class="mini-combobox"/>
                            </td>
                        </tr>
                        <tr class="cCombo" style="display: none">
                            <td class="tdNum1">内容：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cCombo" name="cCombo" class="mini-textarea" onvaluechanged="onComboChanged"/>
                            </td>
                        </tr>
                        <tr class="cCheckbox" style="display: none">
                            <td class="tdNum1">内容：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cCheckbox" name="cCheckbox" class="mini-textarea" onvaluechanged="onCheckboxChanged"/>
                            </td>
                        </tr>
                        <tr class="cGridType" style="display: none">
                            <td class="tdNum1">列类型：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cGridType" name="cGridType" class="mini-combobox" onvaluechanged="oncGridTypeChanged"/>
                            </td>
                        </tr>
                        <tr class="cGridType" style="display: none">
                            <td class="tdNum1">分组：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cGroup" name="cGroup" class="mini-buttonedit" onclick="oncGroupChanged" />
                            </td>
                        </tr>
                        <tr class="cReference" style="display: none">
                            <td class="tdNum1">参照：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cReference" 3="cReference" class="mini-textbox" />
                            </td>
                        </tr>
                        <!--<tr class="cReference" style="display: none">-->
                            <!--<td class="tdNum1">参照2：</td>-->
                            <!--<td style="width:60%;background: #d7ebf9;">-->
                                <!--<input id="cBgReference" name="cBgReference" class="mini-textbox" />-->
                            <!--</td>-->
                        <!--</tr>-->
                        <tr class="cRequire" style="display: none">
                            <td class="tdNum1">是否必填：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cNull" name="cNull" class="mini-combobox"/>
                            </td>
                        </tr>
                        <tr class="cRequire" style="display: none">
                            <td class="tdNum1">验证：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cRequire" name="cRequire" class="mini-combobox"/>
                            </td>
                        </tr>
                        <tr class="cSpinner" style="display: none">
                            <td class="tdNum1">小数点位数：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <input id="cSpinner" name="cSpinner" class="mini-textbox" />
                            </td>
                        </tr>
                        <!--<tr class="cTree" style="display: none">-->
                            <!--<td class="tdNum1">参照档案：</td>-->
                            <!--<td style="width:60%;background: #d7ebf9;">-->
                                <!--<input id="cTree" name="cTree" class="mini-buttonedit" onclick="onSetTree" />-->
                            <!--</td>-->
                        <!--</tr>-->
                    </table>
                </div>
                <div title="其它">
                    <table style="width:100%;table-layout:fixed;">
                        <tr class="cMath">
                            <td class="tdNum1">公式：</td>
                            <td style="width:60%;background: #d7ebf9;">
                                <!--<input id="cTableField" name="cTableField" class="mini-textbox" />-->
                                <input id="cMath" name="cMath" class="mini-buttonedit"
                                       onbuttonclick="onSetMath" allowInput="false" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="../../js/formDesign/formDesign2.js"></script>
<!-- <script type="text/javascript" src="../../js/formDesign/RectSelect.js"></script>
 -->
</body>
</html>

